<template name="shareview">
	<view>
		<view class="cu-modal" :class="modalName=='posterModal'?'show':''">
			<view class="cu-dialog w80">
				<block v-if="type=='member'">
					<view class="bg-white _poster" v-if="loading" id="_poster" ref="poster">
						<view class=" bg-white main">
						</view>
					</view>
				</block>
				<block v-else>
					<view class="text-white flex-end margin-bottom">
						点击右上角进行分享
						<image :src="CLOUDPATH+'/gsc/sharejt.png'" mode="aspectFit" class="sharejiao"></image>
					</view>
				</block>

				<image v-if="!loading && previewFile" class="main-img" :src="previewFile" mode="aspectFill" :style="'height:' + mainHeight+'px'"></image>
				<view class="cu-btn cuIcon-roundclose text-white lg margin-top" @tap="modalName=''"></view>
				<view class="text-white">长按保存图片进行分享</view>
			</view>
		</view>

		<view class="cu-modal drawer-modal" :class="modalName=='wechatModal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog w100">
				<view class="text-white text-xxl margin-top-xxl padding-top-xl">
					<view class="margin-top">
						<text class="cuIcon cuIcon-creative text-xxl "></text>
					</view>
					<view class="margin-top">
						<text>点击右上角分享给好友</text>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='typeModal'?'show':''">
			<view class="cu-dialog">
				<view class="bg-white cu-list col-2 grid no-border">
					<view class="cu-item" @click="createPoster">
						<view class="cuIcon cuIcon-album text-orange"></view>
						<view>海报</view>
					</view>
					<!-- <view class="cu-item">
						<view class="cuIcon cuIcon-form text-blue"></view>
						<view>文案</view>
					</view> -->
					<view class="cu-item" @click="wechatShare">
						<view class="cuIcon cuIcon-weixin text-green"></view>
						<view>微信</view>
					</view>
				</view>
				<view class="bg-white margin-top text-red padding-tb" @tap="modalName=''">
					取消
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import html2canvas from '../../common/unit/html2canvas.min.js'
	import QR from '@/common/unit/wxqrcode.js'
	export default {
		name: "shareview",
		components: {
			html2canvas
		},
		props: {
			type: {
				type: String,
				default: 'member'
			}
		},
		created: function(e) {},
		data() {
			return {
				modalName: '',
				id: 0,
				detail: null,
				member: null, // 用户数据
				value: null, // 分享数据
				qr_code: null,
				mainWidth: 0,
				mainHeight: 100,
				loading: true,
				previewFile: '',
				CLOUDPATH: this.$config.cloudPath
			}
		},
		methods: {
			showModal(value, member) {
				this.value = value
				this.member = member
				// this.modalName = 'typeModal'
				this.loading = true
				this.modalName = 'posterModal'
				this.createPoster()
			},
			wechatShare() {
				this.modalName = 'wechatModal'
			},
			downloadImage() {
				// #ifdef MP-WEIXIN
				// uni.saveImageToPhotosAlbum({
				// 	filePath: this.previewFile,
				// 	success: function() {
				// 		console.log('save success')
				// 		uni.showSuccess('保存成功，可在相册中查看')
				// 	}
				// })
				// #endif
			},
			canvasToImage(context) {
				console.log(context)
				let _this = this
				context.save()
				context.draw(false, () => {
					console.log(123)
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: w,
						height: h,
						destWidth: w,
						destHeight: h,
						canvasId: 'mycanvas',
						success: function(res) {
							// 在H5平台下，tempFilePath 为 base64
							console.log(res.tempFilePath)
							_this.previewFile = res.tempFilePath
							console.log(_this.previewFile)
							_this.loading = false
							uni.hideLoading()
						},
						fail(r) {
							console.log(r)
						}
					}, this)
				})
			},
			canvasMember() {
				let _this = this
				let bg = "@/static/member_share_bg.png"

				var context = uni.createCanvasContext('mycanvas', this)
				this.getNetworkImage(bg).then((res) => {
					console.log(res)
					context.drawImage(res, 0, 0, this.mainWidth, this.mainHeight)
					this.canvasToImage(context)
				})
				return
				let info = uni.createSelectorQuery().in(this).select(".goodsimage")
				info.boundingClientRect((data) => { //data - 各种参数
					let imgw = data.width
					let imgh = data.height

					var context = uni.createCanvasContext('mycanvas', this)
					context.width = w
					context.height = h
					context.setFillStyle("#FFFFFF")
					context.fillRect(0, 0, w, h)
					this.getNetworkImage(this.member.head_portrait2).then((res) => {
						context.drawImage(res, 10, 10, 40, 40)
						this.drawText(context, {
							x: 60,
							y: 25,
							size: 14,
							align: 'left',
							text: this.member.nickname,
							color: "#333333",
							bold: false
						})
						this.drawText(context, {
							x: 60,
							y: 45,
							size: 12,
							align: 'left',
							text: '分享给你一个商品',
							color: "#999999",
							bold: false
						})
						this.drawText(context, {
							x: 20,
							y: imgh + 90,
							size: 20,
							align: 'left',
							text: '￥' + this.value.price,
							color: "#FF0000",
							bold: false
						})
						this.textWrap(context, {
							x: 20,
							y: imgh + 110,
							width: w - 80 - 60,
							height: 20,
							line: 2,
							size: 14,
							align: 'left',
							text: this.value.name,
							color: "#333333",
							bold: false
						})

						this.getNetworkImage(this.value.picture2).then((res2) => {
							context.drawImage(res2, 10, 60, imgw, imgh)
							this.base64src(this.qr_code).then((r) => {
								context.drawImage(r, w - 70 - 20, imgh + 70, 70, 70)
								context.save()
								context.draw(false, () => {
									uni.canvasToTempFilePath({
										x: 0,
										y: 0,
										width: w,
										height: h,
										destWidth: w,
										destHeight: h,
										canvasId: 'mycanvas',
										success: function(res) {
											// 在H5平台下，tempFilePath 为 base64
											console.log(res.tempFilePath)
											_this.previewFile = res.tempFilePath
											console.log(_this.previewFile)
											_this.loading = false
											uni.hideLoading()
										},
										fail(r) {
											console.log(r)
										}
									}, this)
								})
							})
						})
					})
				}).exec();
			},
			createPoster() {
				// this.modalName = 'posterModal'
				uni.showLoading({
					title: '海报生成中...'
				})
				let share_url = this.value.share_url
				console.log(share_url)
				this.qr_code = QR.createQrCodeImg(share_url, {
					errorCorrectLevel: 'L',
					size: parseInt(300) //二维码大小  
				})
				console.log(this.qr_code)

				switch (this.type) {
					case "member":
						this.mainWidth = 314
						this.mainHeight = 419
						this.canvasMember()
						break;
				}
			},
			getNetworkImage(url) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url,
						success: (e) => {
							const p = e.tempFilePath
							if (p.indexOf('json') > -1) {
								reject(p)
								return false
							}
							resolve(p)
						},
						fail: (r) => {
							reject(r)
						}
					})
				})
			},
			base64src: function(base64data) {
				const fsm = wx.getFileSystemManager();
				const FILE_BASE_NAME = 'tmp_base64src';
				return new Promise((resolve, reject) => {
					const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
					if (!format) {
						reject(new Error('ERROR_BASE64SRC_PARSE'));
					}
					const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
					const buffer = wx.base64ToArrayBuffer(bodyData);
					fsm.writeFile({
						filePath,
						data: buffer,
						encoding: 'binary',
						success() {
							resolve(filePath);
						},
						fail() {
							reject(new Error('ERROR_BASE64SRC_WRITE'));
						},
					});
				});
			},
			drawText: function(ctx, obj) {
				ctx.save();
				ctx.setFillStyle(obj.color);
				ctx.setFontSize(obj.size);
				ctx.setTextAlign(obj.align);
				ctx.setTextBaseline(obj.baseline);
				if (obj.bold) {
					ctx.fillText(obj.text, obj.x, obj.y - 0.5);
					ctx.fillText(obj.text, obj.x - 0.5, obj.y);
				}
				ctx.fillText(obj.text, obj.x, obj.y);
				if (obj.bold) {
					ctx.fillText(obj.text, obj.x, obj.y + 0.5);
					ctx.fillText(obj.text, obj.x + 0.5, obj.y);
				}
				ctx.restore();
			},
			textWrap: function(ctx, obj) {
				var td = Math.ceil(obj.width / (obj.size));
				var tr = Math.ceil(obj.text.length / td);
				for (var i = 0; i < tr; i++) {
					var txt = {
						x: obj.x,
						y: obj.y + (i * obj.height),
						color: obj.color,
						size: obj.size,
						align: obj.align,
						baseline: obj.baseline,
						text: obj.text.substring(i * td, (i + 1) * td),
						bold: obj.bold
					};
					if (i < obj.line) {
						if (i == obj.line - 1) {
							txt.text = txt.text.substring(0, txt.text.length - 3) + '......';
						}
						this.drawText(ctx, txt);
					}
				}
			},
		},
	}
</script>

<style>
	.main {
		overflow: hidden;
		border-radius: 0 0 20rpx 20rpx;
	}

	.member {}

	.member .thumb {
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
	}

	.member .thumb image {
		width: 100%;
		height: 100%;
	}

	.line-orange {
		border: 1px solid #ffa530;
		border-radius: 8rpx;
	}

	.goodsimage {}

	.goodsimage image {
		width: 100%;
	}

	.goodsname {
		background-color: #F2F2F2;
		padding: 10rpx;
	}

	.goodsprice {
		font-size: 40rpx;
	}

	.qrcode {
		width: 220rpx;
		height: 220rpx;
	}

	.tips {
		width: 100%;
		margin-right: 60rpx;
	}

	.logo {
		padding: 10rpx;
	}

	.main-img {
		width: 100%;
	}

	.cu-dialog {
		border-radius: 0;
		background: none;
	}

	.w80 {
		width: 80%;
	}

	.cu-btn.lg {
		background: none;
		font-size: 60upx;
	}

	.member {}

	.member .thumb {
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
	}

	.member .thumb image {
		width: 100%;
		height: 100%;
	}

	.line-orange {
		border: 1px solid #ffa530;
		border-radius: 8rpx;
	}

	.goodsimage {}

	.goodsimage image {
		width: 100%;
	}

	.goodsname {
		background-color: #F2F2F2;
		padding: 10rpx;
	}

	.goodsprice {
		font-size: 40rpx;
	}

	.tips {
		width: 100%;
		margin-right: 60rpx;
	}

	.sharejiao {
		width: 100rpx;
		height: 100rpx;
	}

	.flex-end {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.canvas {
		position: absolute;
		z-index: 999;
		/* left: 1000px; */
	}
</style>
